<template>
  <div class="box">
    <!-- loding加载 -->
    <div class="box-top" v-show="loding">
      <van-loading color="#0094ff" style="text-align: center" />
    </div>
    <!-- 轮播图 -->
    <div class="box-top">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#ccc">
        <van-swipe-item v-for="item in banner" :key="item.id">
          <img :src="item.image_url" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 宫格 -->
    <div class="box-two">
      <van-grid :column-num="5">
        <van-grid-item @click="tiaoid(item.id)" :icon="item.icon_url" :text="item.name" v-for="item in channel" :key="item.id">
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 品牌制造商直供 -->
    <h5 v-show="loding2">品牌制造商直供</h5>
    <div class="box-pinpai">
      <div class="pinpai" v-for="item in brandList" :key="item.id">
        <img :src="item.pic_url" alt="" />
        <span>{{ item.name }}</span>
        <span class="jia">￥{{ item.floor_price.toFixed(2) }}元</span>
      </div>
    </div>
    <h5 v-show="loding2">周一周四-新品首发</h5>
    <div class="box-hotgoods">
      <div class="hotgoods" v-for="item in newGoodsList" :key="item.id">
        <img :src="item.list_pic_url" alt="" />
        <span>{{ item.name }}</span>
        <span class="jia">￥{{ item.retail_price.toFixed(2) }}元</span>
      </div>
    </div>
    <h5 v-show="loding2">人气推荐</h5>
    <div class="box-hotGoodsList" v-for="item in hotGoodsList" :key="item.id">
      <img :src="item.list_pic_url" alt="" />
      <div class="right">
        <h6>{{ item.name }}</h6>
        <span>{{ item.goods_brief }}</span>
        <span class="jia">￥{{ item.retail_price.toFixed(2) }}元</span>
      </div>
    </div>
    <h5 v-show="loding2">专题精选</h5>
    <div class="box-topicList">
      <div class="box1">
        <div class="topicList">
          <img src="https://yanxuan.nosdn.127.net/14943267735961674.jpg" alt="" width="350px" />
          <span>"关爱他成长的每一个足迹"</span><br />
          <span>""专业运动品牌同厂，毛毛虫鞋买二送一""</span>
        </div>
      </div>
    </div>
    <!-- 底部所有信息 -->
    <div class="box-categoryList" v-for="item in categoryList" :key="item.id">
        <h5>{{item.name}}</h5>
        <div class="categoryList">
            <div class="boxx" v-for="itam in item.goodsList" :key="itam.id"  @click="add(itam.id)">
                <van-image
                    lazy-load
                    :src="itam.list_pic_url"
                />
                <span>{{ itam.name }}</span>
                <span style="color: #a90000;margin-top: 5px;">￥{{itam.retail_price.toFixed(2)}}元</span>
            </div>
        </div>
      </div>
    </div>

</template>

<script>
import { HomeList } from '@/http/api'

export default {
  data () {
    return {
      // 轮播图
      banner: [],
      // 加载
      loding: true,
      // 宫格
      channel: [],
      // 品牌制造商
      brandList: [],
      // 周一周四新品首发
      newGoodsList: [],
      // 人气推荐
      hotGoodsList: [],
      // 剩下的内容
      categoryList: [],
      list: [],
      // 文字懒加载
      loding2: false
    }
  },
  methods: {
    tiaoid (id) {
      console.log(id)
      this.$router.push({
        path: '/admin/category',
        query: {
          id: id
        }
      })
    },
    async getList () {
      const res = await HomeList()
      if (res.status == 200) {
        this.banner = res.data.data.banner
        this.channel = res.data.data.channel
        this.loding = false
        this.loding2 = true
        this.brandList = res.data.data.brandList
        this.newGoodsList = res.data.data.newGoodsList
        this.hotGoodsList = res.data.data.hotGoodsList
        this.categoryList = res.data.data.categoryList
      }
    },
    add (id) {
      this.$router.push({
        path: '/admin/details',
        query: {
          id
        }
      })
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #000000;
  font-size: 20px;
  line-height: 200px;
  text-align: center;
  background-color: #39a9ed;
}

.box {
  width: 100%;

  .box-categoryList {
    width: 100%;

    .categoryList {
      display: flex;
      width: 100%;
      flex-wrap: wrap;

      .boxx {
        width: 49%;
        box-sizing: border-box;

        img {
          width: 100%;
        }

        span {
          display: block;
          font-size: 16px;
          text-align: center;
        }
      }
    }
  }

  .box-topicList {
    height: 270px;

    .box1 {
      display: flex;

    }

    .topicList {
      margin-left: 10px;
    }

    span {
      font-size: 16px;
    }
  }

  .box-hotGoodsList {
    width: 100%;
    display: flex;
    background-color: #fafafa;
    margin-bottom: 10px;

    img {
      width: 120px;
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 10px;

      h6 {
        font-size: 18px;
        font-weight: 400;
      }

      span {
        font-size: 12px;
      }

      .jia {
        color: #8d0000;
      }
    }
  }

  .box-hotgoods {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .hotgoods {
      width: 50%;
      display: flex;
      flex-direction: column;

      img {
        width: 170px;
      }

      span {
        font-size: 14px;
        text-align: center;
      }

      .jia {
        top: 30px;
        color: #8b0000;
      }
    }
  }

  .box-top {
    width: 100%;
    height: 200px;

    img {
      width: 100%;
      height: 200px;
    }
  }

  .box-two {
    .van-grid {
      display: flex;
    }
  }

  h5 {
    text-align: center;
    box-sizing: border-box;
    padding: 20px 0;
    font-size: 20px;
    font-weight: 400;
  }

  .box-pinpai {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .pinpai {
      position: relative;
      margin-bottom: 10px;

      span {
        position: absolute;
        left: 5px;
      }

      .jia {
        top: 30px;
        color: #8b0000;
      }

      img {
        width: 183px;
      }

      span {
        font-size: 14px;
      }
    }
  }
}</style>
